<template>
    <Header :info="state.info" />
    <!-- <Search @secrchsubmit="funlist" /> -->
    <!-- <StatisticsSearch class="search_box" :options="statisOptions" @submit="onSubmit" /> -->
    <Quantity :basic="state.basic" />
    <Statistics :info="state.info" @submit="getstatchartListFun" />
    <Tablelist ref="TablelistRef" :basic="state.basic" :tabledata="state.tabledata" :paramselist="paramselist" />
</template>

<script setup lang="ts">
import Header from './components/Header.vue';
import Search from './components/Search.vue';
import Quantity from './components/Quantity.vue';
import Statistics from './components/Statistics.vue';
import Tablelist from './components/Tablelist.vue';
import { fissionStats } from '@/api/smartMarketing/fissionDrainage';
import { statbaseList, statinfoList, statchartList, statdetailList } from '@/api/highMaterial/collectionTable';
import StatisticsSearch from '@/components/zw/statistics-search/StatisticsSearch.vue';

import { ref, reactive, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import { downFile, getDay } from '@/utils/utils';
import { number } from 'echarts';
const route = useRoute();
const TablelistRef = ref<any>(null);
const params = reactive({
    id: route.query.id,
    time: []
});
// //趋势图传参
// const paramsechart = reactive({
//     id: route.query.id,
//     time: [getDay(-6), getDay(0, true)],
//     type: '' //1-收集表份数 2-填写次数 3-新增客户数 4-进群人数,默认收集表份数
// });
//列表传参
const paramselist = reactive({
    id: route.query.id,
    time: []
});
const state: any = ref({
    info: {
        title: '', //活动名称
        created_uid_name: '', //创建人name
        created_at: '', //创建时间
        effect_time: ['', ''], //有效期
        status: '', //1-未开始 2-已开始 3-已结束 4-提前结束
        actual_end_time: '' //提前结束时间
    },
    basic: {
        jump_type: '', //1-员工 2-群
        total_num: 0, //收集表份数
        people_num: 0, //填写人数
        new_cust: 0, //新增客户数 type=1
        join_num: 0 //进群人数 type =2
    },
    chart: {
        num: [],
        time: []
    },
    tabledata: {
        data: '' //表格数据
    }
});

const statisOptions = reactive([
    {
        label: '时间筛选',
        type: 'dateFilter'
    }
]);
// const onSubmit = (data: any) => {
//     params.time = data.times;
//     paramsechart.time = data.times;
//     paramselist.time = data.times;
//     nextTick(() => {
//         if (data.times) {
//             TablelistRef.value.changeParams();
//             getstatinfoListFun();
//             getstatchartListFun(paramsechart.type);
//         }
//     });
// };
// 统计活动信息
const getstatbaseFun = (data?: any) => {
    statbaseList({ id: route.query.id }).then((res: any) => {
        state.value.info = res;
    });
};
getstatbaseFun();
// 统计基本信息
const getstatinfoListFun = (data?: any) => {
    statinfoList(params).then((res: any) => {
        state.value.basic = res;
    });
};
getstatinfoListFun();
// // 统计趋势图
// const getstatchartListFun = (data?: any) => {
//     paramsechart.type = data;
//     const params = {
//         ...paramsechart,
//         type: data || 1 //1-收集表份数 2-填写次数 3-新增客户数 4-进群人数,默认收集表份数
//     };
//     statchartList(params).then((res: any) => {
//         // console.log('列表数据', res)
//         state.value.chart.time = res.time;
//         state.value.chart.num = res.data;
//     });
// };
</script>

<style lang="scss" scoped>
.search_box {
    margin-bottom: 15px;
}
</style>
